<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>教练详情</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="icon/iconfont.css"/>
    <style>
        .banner img{display: block;width: 100%;}
        .title{padding: 0.65rem 0.5rem;color: #929292;font-size: 12px;}
        .title span{color: #fbb701;font-size: 0.6rem;margin-left: 0.3rem;}
        .title span i{font-size: 0.6rem;}
        .info{background-color: #323238;padding: 0.5rem;}
        .info .left{font-size: 0.6rem;color: #929292;}
        .info .right{font-size: 0.7rem;color: #fff;}
        .guide-detail{padding: 0.5rem;color: #929292;font-size: 0.6rem;background-color: #323238;line-height: 1rem;}
        .class-card{padding:0.25rem 0.5rem;background-color: #323238;}
        .class-card li{overflow: hidden;padding: 0.25rem 0;}
        .class-card li .img-box{float: left;position: relative;}
        .class-card li .img-box .bg-img{display: block;width: 6rem;height: 4.25rem;}
        .class-card li .img-box .card-title{position: absolute;left: 0;bottom: 0;width: 100%;line-height: 1.4rem;color: #fff;padding-left: 0.5rem;}
        .class-card li .img-box .tips-img{position: absolute;right: 0;bottom: 0.5rem;width: 2.2rem;height: 2rem;}
        .class-card li .middle-word{float: left;margin-left: 0.5rem;}
        .class-card li .middle-word h1{font-size: 0.8rem;color: #fff;font-weight: normal;margin-top: 0.5rem;}
        .class-card li .middle-word h2{font-size: 0.6rem;color: #999;font-weight: normal;margin-top: 0.3rem;}
        .class-card li .middle-word h3{font-size: 0.8rem;color: #fbb701;font-weight: normal;margin-top: 0.3rem;}
        .class-card li .btn{float: right;display: table;height: 4.25rem;}
        .class-card li .btn div{display: table-cell;vertical-align: middle;}
        .class-card li .btn div button{font-size: 0.6rem;-webkit-appearance: none;background-color: #fbb701;border: none;
            color: #fff;padding: 0.4rem 1.2rem;border-radius: 0.2rem;}

        .evaluate-list{}
        .evaluate-list li{background-color: #323238;position: relative;padding: 0.5rem;display: -webkit-box;margin-bottom: 0.5rem;}
        .evaluate-list li .face-img{width: 2.2rem;height: 2.2rem;}
        .evaluate-list li .face-img img{display: block;width: 100%;height: 100%;}
        .evaluate-list li .evaluate-item{-webkit-box-flex: 1;margin-left: 0.5rem;}
        .evaluate-list li .evaluate-item .evaluate-title{overflow: hidden;line-height: 1.5rem;}
        .evaluate-list li .evaluate-item .evaluate-title .name{float: left;font-size: 0.65rem;color: #fff;}
        .evaluate-list li .evaluate-item .evaluate-title .time{float: right;font-size: 0.6rem;}
        .evaluate-list li .evaluate-item .evaluate-detail{font-size: 0.7rem;color: #ccc;text-align: justify;line-height: 1rem;}
        .evaluate-list li .evaluate-item .stars{color: #fbb701;font-size: 0.6rem;margin-bottom: 0.25rem;}
        .evaluate-list li .evaluate-item .stars i{font-size: 0.6rem;}

        .footer-box{height: 2.5rem;}
        .footer-fixed{position: fixed;left: 0;bottom: 0;width: 100%;height: 2.5rem;overflow: hidden;background-color: #18171c;}
        .footer-fixed .left-word{float: left;line-height: 2.5rem;}
        .footer-fixed .right-btn{float: right;line-height: 2.5rem;background-color: #fbb701;font-size: 0.7rem;padding: 0 1.25rem;color: #fff;}
    </style>
</head>
<body>
    <div class="container">
        <div class="banner">
            <img src="img/personal_guide_img02.png" alt=""/>
        </div>
        <p class="title">基本信息</p>
        <div class="info">
            <ul>
                <li>
                    <span class="left">姓名:</span><span class="right">Lazar</span>
                </li>
                <li>
                    <span class="left">年龄:</span><span class="right">26岁</span>
                </li>
                <li>
                    <span class="left">服务价格:</span><span class="right" style="color: #fbb701;">200-500元/小时</span>
                </li>
                <li>
                    <span class="left">擅长项目:</span><span class="right">减肥塑型、运动康复</span>
                </li>
            </ul>
        </div>
        <p class="title">健身经历</p>
        <p class="guide-detail">这里填写教练的个人经历这里填写教练的个人经历这里填写教练的个人经历这里填写教练的个人经历这里填写教练的个人经历这里填写教练的个人经历</p>
        <p class="title">课时卡</p>
        <div class="class-card">
            <ul>
                <li>
                    <div class="img-box">
                        <img class="bg-img" src="img/index_detail_img03.png" alt=""/>
                        <p class="card-title">会员卡</p>
                        <img class="tips-img" src="img/index_detail_img05.png" alt=""/>
                    </div>
                    <div class="middle-word">
                        <h1>work+私教馆年卡</h1>
                        <h2>有效期：一年</h2>
                        <h3>￥2000</h3>
                    </div>
                    <div class="btn">
                        <div>
                            <button>购买</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img-box">
                        <img class="bg-img" src="img/index_detail_img03.png" alt=""/>
                        <p class="card-title">会员卡</p>
                        <img class="tips-img" src="img/index_detail_img05.png" alt=""/>
                    </div>
                    <div class="middle-word">
                        <h1>work+私教馆年卡</h1>
                        <h2>有效期：一年</h2>
                        <h3>￥2000</h3>
                    </div>
                    <div class="btn">
                        <div>
                            <button>购买</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <p class="title">评价详情<span><i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i> 5.0</span>
        </p>
        <ul class="evaluate-list">
            <li>
                <div class="face-img">
                    <img src="img/index_detail_img04.png" alt=""/>
                </div>
                <div class="evaluate-item">
                    <p class="evaluate-title">
                        <span class="name">Lazar</span>
                        <span class="time">3月25日 13:17</span>
                    </p>
                    <p class="stars">
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i> 5.0</p>
                    <p class="evaluate-detail">你还在使用传统的哑铃、杠铃训练吗？你还在使用跑步机减肥吗？你还在因为锻炼枯燥而无法坚持吗？快来使用功能性训练来减脂锻炼吧！本课程使用绳梯、跨栏架、BOSU球、药球等功能训练器械进行训练，使你得训练更有趣、更有效让你爱上锻炼。</p>
                </div>
            </li>
            <li>
                <div class="face-img">
                    <img src="img/index_detail_img04.png" alt=""/>
                </div>
                <div class="evaluate-item">
                    <p class="evaluate-title">
                        <span class="name">Lazar</span>
                        <span class="time">3月25日 13:17</span>
                    </p>
                    <p class="stars">
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i> 5.0</p>
                    <p class="evaluate-detail">你还在使用传统的哑铃、杠铃训练吗？你还在使用跑步机减肥吗？你还在因为锻炼枯燥而无法坚持吗？快来使用功能性训练来减脂锻炼吧！本课程使用绳梯、跨栏架、BOSU球、药球等功能训练器械进行训练，使你得训练更有趣、更有效让你爱上锻炼。</p>
                </div>
            </li>
        </ul>
    </div>
<footer class="footer-box">
    <div class="footer-fixed">
        <p class="left-word"></p>
        <a class="right-btn" href="reserve_guide_detail.html">立即预约</a>
    </div>
</footer>
</body>
</html>